<template>
	<view class="usfo-box">
		<view class="usfom">
			<view class="usfom-actie">
				<view class="actie">
					<image class="img" :src="usfom.avatarUrl"></image>
				</view>
				<text class="usfom-name">{{usfom.nickName}}</text>
			</view>
		</view>
		<view class="usfo-bottm">
			<view class="usfo-top">
				<view class="usfo-item" v-for="(item,index) in topList" :key="index">
					<view class="usfo-value">{{item.value}}</view>
					<view class="usfo-text">{{item.name}}</view>
				</view>
			</view>
			<view class="usfo-zhob">
				<text class="zhob-totie">我的订单</text>
				<view class="zhob-hezi">
					<view class="zhob-item" v-for="(item,index) in zhobuList" :key="index">
						<image class="zhob-img" :src="item.img"></image>
						<text class="zhob-value">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="usfo-botm">
				<view class="usfo-btm">
					<text class="usfo-let">收货地址</text>
					<uni-icons type="arrowright" size="16"/>
				</view>
				<view class="usfo-btm">
					<text class="usfo-let">联系客服</text>
					<uni-icons type="arrowright" size="16"/>
				</view>
				<view class="usfo-btm" @click="hadotuichulogin">
					<text class="usfo-let">退出登录</text>
					<uni-icons type="arrowright" size="16"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
	export default {
		name:"my-userinfo",
		data() {
			return {
				topList:[
					{
						value:8,
						name:'收藏的店铺',
					},
					{
						value:14,
						name:'收藏的商品',
					},
					{
						value:18,
						name:'关注的商品',
					},
					{
						value:84,
						name:'足迹',
					}
				],
				zhobuList:[
					{
						img:'/static/tab_icons/hot-active.png',
						name:'代付款'
					},
					{
						img:'/static/tab_icons/cart-avtev.png',
						name:'待收货'
					},
					{
						img:'/static/tab_icons/hot-video-active.png',
						name:'退款/退货',
					},
					{
						img:'/static/tab_icons/my-active.png',
						name:'全部订单'
					},
				],
			};
		},
		computed:{
			...mapState({usfom:state=>state.user.userinfo})
		},
		methods:{
			//退出登录
			hadotuichulogin(){
				uni.showModal({
					content: '确认退出登录嘛？',
					confirmText: '确定',
					cancelText: '取消',
					success: ({
						confirm
					}) => {
						if (confirm) {
							this.$store.commit('addtuiclogin')
						} else {
							uni.showToast({
								title: '已取消',
								icon: 'error',
								mask: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.usfo-box{
	height: 270px;
	background: #ffaa00;
	.usfom{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.usfom-actie{
			text-align: center;
			.usfom-name{
				color: #ffffff;
			}
			.actie{
				.img{
					border-radius: 50%;
					border: 2px solid #FFFFFF;
					width: 100px;
					height: 100px;
				}
			}
		}
	}
	.usfo-bottm{
		position: relative;
		top: -10px;
		padding: 0 10px;
		.usfo-top{
			background-color: #FFFFFF;
			border-radius: 5px;
			width: 355px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.usfo-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 10px;
				.usfo-value{
					font-size: 15px;
					color: #959595;
				}
				.usfo-text{
					font-size: 15px;
					font-weight: 1;
				}
			}
		}
		.usfo-zhob{
			margin-top: 10px;
			background: #FFFFFF;
			border-radius: 5px;
			padding: 10px;
			box-sizing: border-box;
			.zhob-totie{
				font-size: 15px;
				font-weight: 50;
			}
			.zhob-hezi{
				margin-top: 20px;
				display: flex;
				padding: 0 5px;
				align-items: center;
				justify-content: space-between;
				.zhob-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					.zhob-img{
						width: 30px;
						height: 30px;
						margin-bottom: 5px;
					}
					.zhob-value{
						font-size: 13px;
					}
				}
			}
		}
		.usfo-botm{
			margin-top: 10px;
			height: 150px;
			background: #ffffff;
			border-radius: 5px;
			padding:0 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.usfo-btm{
				display: flex;
				justify-content: space-between;
				.usfo-let{
					font-weight: 50;
				}
			}
		}
	}
	
}
</style>
